<template>
    <aside class="sidebar">
      <!-- Logo 区域 -->
      <div class="sidebar-logo">
        <img src="@/assets/logo.png" alt="Logo" class="logo-img">
      </div>

      <!-- 导航菜单 -->
      <ul class="sidebar-menu">
        <!-- 首页/登录页面链接 -->
        <li>
          <router-link to="/homepage" class="sidebar-link">
            首页
          </router-link>
        </li>
        <!-- 社团管理链接 -->
        <li>
          <router-link to="/club-management" class="sidebar-link">
            社团管理
          </router-link>
        </li>
        <!-- 社团审核链接 -->
        <li>
          <router-link to="/club-audit" class="sidebar-link">
            社团审核
          </router-link>
        </li>
        <!-- 用户管理链接 -->
        <li>
          <router-link to="/user-management" class="sidebar-link">
            用户管理
          </router-link>
        </li>
        <li>
          <router-link @click.native="open" class="sidebar-link logout-link" to="#">
            退出登录
          </router-link>
        </li>
      </ul>
    </aside>
  </template>

  <script>
  // 这里可以导入你需要的任何脚本
  import {ElMessage, ElMessageBox} from "element-plus";

  export default {
    methods: {

      open() {
        ElMessageBox.confirm(
            '你确认退出登录吗?',
            {
              confirmButtonText: 'YES',
              cancelButtonText: 'NO',
              center: true,
              roundButton: true
            }
        )
            .then(() => {
              sessionStorage.removeItem("token");
              sessionStorage.removeItem("studentId");

              ElMessage.success('退出登录成功');
              this.$router.push({ name: "Homepage" });
            })
            .catch(() => {

            })
      },
    }
  }
  </script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  background: #ffffff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img {
  width: 100px; /* 根据你的 logo 图片大小调整 */
  height: auto;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin-top: 20px; /* 与 logo 部分保持一定距离 */
  flex-grow: 1; /* 填充剩余空间 */
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.sidebar-link:hover,
.router-link-exact-active {
  background-color: #e9ecef;
}

.logout-link {
  color: #333;
  background-color: transparent;
}

.logout-link:hover {
  background-color: #e9ecef;
}

.sidebar-icon {
  margin-right: 10px;
  font-size: 18px;
}
</style>
